<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor para Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Map Tour 2 - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c3 {border-width:0}
    span.c2 {font-size: smaller}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; <a href="../../../learn/tutorials/maptour/maptour.html">MapTour</a> &gt; MapTour2 &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Map Tour, Parte 2
              </h1>
              <div class="imagecontainer">
                <img align="right" alt="" border="0" src="MapTourAssets/eiffel-tower.png">
              </div><br>
              <span class="c2">Imagen de Google Maps © 2010 Aerodata International Surveys, The GeoInformation Group</span>.
              <p>
                Este tutorial extiende la aplicación <a href="../../../learn/tutorials/maptour/maptour.html">Map Tour</a> descrita en un tutorial anterior. Mientras que esa aplicación lanzaba la aplicación Maps con simples términos de búsqueda, esta lanzará mapas específicos con vistas ampliadas de la Torre Eiffel y el Louvre, y street view en Notre Dame. Aprenderás un uso mas sofisticado de <span class="ButtonText">ActivityStarter</span> y del componente <span class="ButtonText">ListPicker</span> y en general como añadir enlaces en tu aplicación a los mapas específicamente elegidos.
              </p>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate al sitio web de App Inventor. Elige la aplicación MapTour y <span class="ButtonText">SaveAs</span> (guardar como)  y renómbrala como MapTourSpecific, y ajusta también el <span class="ButtonText">Title</span> (título) de la pantalla a Map Tour Specific. Abre el editor de bloques y conéctalo al teléfono.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                Como en la Parte I, esta aplicación usará lugares de París como destinos. Cuando el usuario elija uno, se iniciará Google Maps, pero en lugar de una simple búsqueda, mostrará una vista especifica ampliada o un mapa de street-view del destino.
              </p>
              <p>
                La idea general es primero usar Google Maps para encontrar o crear mapas específicos para los elementos, y después usar App Inventor para integrarlos en la aplicación de información que estas construyendo.
              </p>
              <p>
                El tutorial muestra un uso mas sofisticado de los siguientes componentes de App Inventor:<br>
              </p>
              <ul>
                <li>El componente <span class="ButtonText">ActivityStarter</span> para iniciar aplicaciones Android desde tu aplicación.
                </li>
                <li>El componente <span class="ButtonText">ListPicker</span> para permitir al usuario elegir de una lista de elementos.<br>
                </li>
              </ul>
              <h2>
                Prepara los componentes 
              </h2><br>
              <p>
                La interfaz de usuario para MapTourSpecific es exactamente la misma que en la Parte 1 de este tutorial. También puedes dejar las propiedades de <span class="ButtonText">ActivityStarter</span> exactamente igual.
              </p>
              <h2>
                Encontrar DataUri para mapas específicos
              </h2>
              <p>
                La clave de esta aplicación es encontrar los mapas que quieres mostrar y ajustar la propiedad <span class="ButtonText">ActivityStarter.DataURI</span> de acuerdo con cada una de las marcas de localización. Los mapas para este ejemplo se encuentran del siguiente modo:
              </p>
              <ul>
                <li>En tu computadora, abre el navegador y ve a <a href="http://maps.google.com">maps.google.com</a>
                </li>
                <li>Busca una marca de localización (por ejemplo, la Torre Eiffel)
                </li>
                <li>Amplia hasta el nivel que desees, quizás eligiendo Street View.
                </li>
                <li>Haz clic en el botón Enlazar cerca de la esquina superior izquierda de la ventana de Maps y copia la URL del map. Usarás esta URL o partes de ella para lanzar un mapa desde App Inventor.
                </li>
              </ul>
              <p>
                Usando este esquema, encontrarás las siguientes URL en Maps:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Marca de localización
                      </td>
                      <td class="tbl-header">
                        URL de Maps
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Eiffel Tower
                      </td>
                      <td width="600">
                        http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=eiffel+tower&amp;sll=37.0625,-95.677068<br>
                        &amp;sspn=48.909425,72.333984&amp;ie=UTF8&amp;hq=Tour+Eiffel&amp;hnear=Tour+Eiffel,+Quai+Branly,+75007+Paris,+Ile-de-France,+France&amp;ll=48.857942,2.294748&amp;spn=0.001249,0.002207&amp;t=h&amp;z=19                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Musee Louvre
                      </td>
                      <td width="600">
                        <p>
                          http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;q=louvre&amp;sll=48.86096,2.335421&amp;sspn=0.002499,0.004415&amp;ie=UTF8&amp;t=h&amp;split=1<br>
                          &amp;filter=0&amp;rq=1&amp;ev=zi&amp;radius=0.12&amp;hq=louvre&amp;hnear=&amp;ll=48.86096,2.335421&amp;spn=0.002499,0.004415&amp;z=18                        
                        </p>
                      </td>
                    </tr>
                    <tr>
                      <td height="48" nowrap>
                        <p>
                          Notre Dame,<br>
                          Street View
                        </p>
                      </td>
                      <td width="600">
                        <p>
                          http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;q=french+landmarks&amp;sll=48.853252,2.349111&amp;sspn=0.002411,0.004415<br>
                          &amp;ie=UTF8&amp;t=h&amp;radius=0.12&amp;split=1&amp;filter=0&amp;rq=1&amp;ev=zi&amp;hq=french+landmarks&amp;hnear=&amp;ll=48.853252,2.349111&amp;spn=0,0.004415<br>
                          &amp;z=18&amp;layer=c&amp;cbll=48.853046,2.348861&amp;panoid=74fLTqeYdgkPYj6KKLlqgQ&amp;cbp=12,63.75,,0,-35.58                        
                        </p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Para ver como se muestran estos mapas, pega las URL anteriores en un navegador. Los dos primeros son mapas regulares ampliados, mientras que el último es una vista de street view.
              </p>
              <p>
                MapTourSpecific permite al usuario elegir una de estas tres marcas de localización de una lista y este verá el mapa correspondiente aparecer en el teléfono. Necesitarás usar los datos de las URL de los mapas anteriores para ajustar <span class="ButtonText">DataUri</span> para <span class="ButtonText">ActivityStarter</span>. Puedes usar la URL completa como <span class="ButtonText">DataUri</span>, o usar los datos de latitud y longitud de la URL, colocándolos en <span class="ButtonText">DataUri</span> del siguiente modo:
              </p>
              <blockquote>
                geo:latitude, longitude
              </blockquote>
              <p>
                Por ejemplo, puedes mostrar el mapa de la Torre Eiffel con lo siguiente:
              </p>
              <blockquote>
                geo:48.857942,2.294748?t=h&amp;z=19
              </blockquote>
              <p>
                El parámetro "t=h" especifica que el mapa es un híbrido que muestra tanto la vista de satélite como la vista de las direcciones, "z=19" ajusta el nivel de zoom. Fíjate en que los números para la latitud y la longitud vienen del parámetro "ll" de la URL mostrada mas arriba.
              </p>
              <p>
                Puedes también colocar la URL completa de un mapa en la propiedad <span class="ButtonText">ActivityStarter.DataUri</span>. Esta técnica se usará para el tercer mapa (el mapa de Notre Dame).
              </p>
              <h2>
                Definir la lista para dataUri
              </h2>
              <p>
                Necesitarás una lista llamada <span class="ButtonText">dataURIs</span>, con un elemento para cada mapa que quieras mostar. Crea esta lista de modo que los elemento correspondan a los elementos de la lista de destinos -- el primer <span class="ButtonText">dataURI</span> debe corresponder al primer destino (la Torre Eiffel) y así sucesivamente. La lista debe quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="95" src="MapTourAssets/dataURIlist.png" width="934">
              </div>
              <p>
                Los dos primeros elementos mostrados son los <span class="ButtonText">DataURI</span> para la Torre Eiffel y el Louvre. Ambos usan el protocolo "geo:". El tercer <span class="ButtonText">DataURI</span> no se muestra completamente por ser demasiado largo para esta página. Deberás copiar esta URL de la entrada para "Notre Dame, Street View" de la tabla de arriba y colocarla en un bloque <span class="ButtonText">text</span>.
              </p>
              <h2>
                Modificar el comportamiento ListPicker.AfterPicking
              </h2>
              <p>
                En la Parte I de este tutorial, el comportamiento <span class="ButtonText">ListPicker.AfterPicking</span> ajusta <span class="ButtonText">DataUri</span> a la concatenación de "geo:0,0?q=" y el destino de la lista elegido por el usuario, por ejemplo, la Torre Eiffel. En esta segunda parte, el comportamiento <span class="ButtonText">AfterPicking</span> debe ser mas sofisticado. Específicamente, cuando el usuario elige uno de los elementos de <span class="ButtonText">ListPicker,</span> necesitas saber el <em>index</em> (indice) de la elección. Puedes usar este indice para seleccionar el <span class="ButtonText">DataUri</span> correcto de la lista dataURIs.
              </p>
              <p>
                Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable</span> ("index")
                      </td>
                      <td>
                        Definitions
                      </td>
                      <td>
                        esta variable mantendrá el valor indice de la elección del usuario
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (1)
                      </td>
                      <td>
                        Math
                      </td>
                      <td>
                        inicia la variable index (indice) con valor 1
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ListPicker1.AfterPicking</span>
                      </td>
                      <td>
                        ListPicker1
                      </td>
                      <td>
                        este evento se inicia cuando el usuario elige un elemento
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set index to</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ajusta esta variable a la posición del elemento seleccionado<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">position in list</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        toma la posición (index) de un elemento seleccionado
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ListPicker1.Selection</span>
                      </td>
                      <td>
                        ListPicker1
                      </td>
                      <td>
                        el elemento seleccionado, por ejemplo "la Torre Eiffel". colócalo en la ranura <span class="ButtonText">thing</span> de <span class="ButtonText">position in list</span>.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global destinations</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        colócalo en la ranura <span class="ButtonText">list</span> de <span class="ButtonText">position in list</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set ActivityStarter.DataUri</span>
                      </td>
                      <td>
                        ActivityStarter
                      </td>
                      <td>
                        ajusta esto antes de iniciar la actividad para abrir un mapa
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">select list item</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        necesario para seleccionar un elemento de la lista <span class="ButtonText">DataURIs</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global DataURIs</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        la lista de <span class="ButtonText">DataURIs</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global index</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        esta variable mantiene la posición del elemento elegido
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ActivityStarter.StartActivity</span>
                      </td>
                      <td>
                        ActivityStarter
                      </td>
                      <td>
                        inicia la aplicación Maps
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="238" src="MapTourAssets/AfterPickingPt2.png" width="536">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Cuando el usuario elige un elemento de <span class="ButtonText">ListPicker</span>, el evento <span class="ButtonText">AfterPicking</span> se activa. El elemento elegido, por ejemplo "la Torre Eiffel" está en <span class="ButtonText">ListPicker.Selection</span>. El controlador de evento primero usa el bloque <span class="ButtonText">position in list</span> para encontrar la posición del elemento seleccionado en la lista de destinos. Si se elige "Tour Eiffel", <span class="ButtonText">index</span> será 1, si se elige "Musee du Louvre", <span class="ButtonText">index</span> será 2, y si se elige "Cathedrale Notre Dame", <span class="ButtonText">index</span> será 3.
              </p>
              <p>
                El index (indice) será entonces usado para seleccionar un elemento de la otra lista, <span class="ButtonText">dataURIs</span>, y ajustará esa entrada como <span class="ButtonText">DataUri</span> de <span class="ButtonText">ActivityStarter</span>. Una vez que esto está ajustado, el mapa puede ser lanzado con <span class="ButtonText">ActivityStarter.StartActivity</span>.
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> Haz clic en el botón "Choose Destination" en el teléfono. El selector de lista (list picker) debe aparecer con los tres elementos. Elige uno de los elementos para ver que mapa aparece.<br>
              </blockquote>
              <h2>
                Revisión
              </h2>Estas son algunas de las ideas examinadas en este tutorial:<br>
              <ul>
                <li>El componente <span class="ButtonText">ListPicker</span> permite al usuario elegir de una lista de elementos. La propiedad <span class="ButtonText">Elements</span> mantiene la lista, la propiedad <span class="ButtonText">Selection</span> mantiene el elemento seleccionado, y el evento <span class="ButtonText">AfterPicking</span> se inicia cuando el usuario elige un elemento. Puedas también identificar el index (indice) del elemento seleccionado con una llamada <span class="ButtonText">position in list</span> para encontrar la posición de <span class="ButtonText">Selection</span> en lea lista.<br>
                </li>
                <li>El componente <span class="ButtonText">ActivityStarter</span> te permite iniciar otras aplicaciones. Maps es una de estas aplicaciones -- puedes iniciarla y proporcionar <span class="ButtonText">DataUri</span> para especificar el mapa concreto que quieres abrir. Este <span class="ButtonText">DataUr</span> puede ser la URL de un mapa concreto, o puede ser una consulta para una búsqueda especifica.<br>
                </li>
              </ul>
              <h2>
                Escanea la aplicación de ejemplo para tu teléfono
              </h2>
              <p>
                Escanea el siguiente código Qr con tu teléfono para instalar y ejecutar la aplicación de ejemplo.
              </p>
              <div class="imagecontainer">
                <img alt="" src="MapTourAssets/barcode2.png">
              </div>
              <h2>
                Descarga el código fuente
              </h2>Si te ha gustado trabajar con este ejemplo en App Inventor, descarga el <a href="MapTourAssets/MapTourSpecific.zip">código fuente</a> a tu computadora, despues abre App Inventor, ve a la página <span class="ButtonText">My Projects</span>, y elige <span class="ButtonText">More Actions | Upload Source</span>.
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-legal">
          <p>
            <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c3" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
            Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
          </p>
          <p>
            El trabajo original de Google se ha modificado<br>
            El trabajo modificado fue traducido del Inglés al Español<br>
            <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
          </p>
        </div>
        <div class="footer-lastupdate">
          <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
          </script>
        </div>
      </div>
    </div>
  </body>
</html>


